<template>
    <!-- 实名找回 -->
    <div>
        <Logintop />
        <div class="pagepadding">
            <div class="ffffff radius">
                <ul class="flexbetween bottomline mainpadding">
                    <li>确认本人身份信息</li>
                    <li class="pointer"><i class="el-icon-document"></i><span class="margin-left1">帮助文档</span></li>
                </ul>
                <div class="margin-top4 contentpadding">
                    <div class="itemtext"><span class="redstar">*</span>认证方式</div>
                    <ul class="flexbetween margin-top1">
                        <li class="flexleft pointer" :class="type == 1 ? 'itembox' : 'noitembox'" @click="changetype(1)">
                            <img src="@/assets/img/login/phone.svg" alt="">
                            <span class="titletext margin-left1">手机认证</span>
                        </li>
                        <li class="flexleft pointer" :class="type == 2 ? 'itembox' : 'noitembox'" @click="changetype(2)">
                            <img src="@/assets/img/login/face.svg" alt="">
                            <span class="titletext margin-left1">人脸识别</span>
                        </li>
                    </ul>
                    <el-form :rules="rules" ref="ruleForm" class="flexbetween">
                        <el-col :span="11">
                            <el-form-item label="姓名" prop="name">
                                <el-input v-model="ruleForm.name" placeholder="姓名" disabled></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="身份证号" prop="code">
                                <el-input v-model="ruleForm.code" placeholder="身份证号" disabled></el-input>
                            </el-form-item>
                        </el-col>
                    </el-form>
                    <template v-if="type == 1">
                        <el-form :model="ruleForm" :rules="rules" ref="ruleForm">
                            <el-col :span="11">
                                <el-form-item label="手机号" prop="mobile">
                                    <el-input v-model="ruleForm.mobile" placeholder="输入本人身份证办理手机号"></el-input>
                                </el-form-item>
                            </el-col>
                        </el-form>
                        <div class="margin-top xyzc flexright">
                            <el-checkbox v-model="checked"></el-checkbox>
                            <span class="margin-left1">我已阅读并同意</span>
                            <span class="lan pointer" @click="showdialog(1)">《大鸿签服务协议》</span>
                            <span class="lan pointer" @click="showdialog(2)">《隐私政策》</span>
                        </div>
                        <div class="margin-top1 flexright">
                            <el-button type="primary" @click="agreeContinue('ruleForm')">同意并继续</el-button>
                        </div>
                    </template>
                    <template v-if="type == 2">
                        <div class=" xyzc flexright">
                            <el-checkbox v-model="checked"></el-checkbox>
                            <span class="margin-left1">我已阅读并同意</span>
                            <span class="lan pointer" @click="showdialog(1)">《大鸿签服务协议》</span>
                            <span class="lan pointer" @click="showdialog(2)">《隐私政策》</span>
                        </div>
                        <div class="margin-top1 flexright">
                            <el-checkbox v-model="checked1"></el-checkbox>
                            <span class="margin-left1">我同意大鸿签采集人脸识别数据用于认证服务</span>
                        </div>
                        <div class="margin-top1 flexright">
                            <el-button type="primary" @click="agreeContinue('ruleForm')">同意并继续</el-button>
                        </div>
                    </template>
                </div>
            </div>
        </div>
        <el-dialog :title="dialogtitle" :visible.sync="dialogVisible" width="50%" :before-close="handleClose">
            <div v-html="content" class="scroll"></div>
            <span slot="footer" class="dialog-footer">
                <el-button type="primary" @click="dialogVisibleFn">确 定</el-button>
            </span>
        </el-dialog>
        <!-- 扫码完成认证 -->
        <el-dialog :visible.sync="scanshow" width="20%" :before-close="handleClose">
            <div class="scancertificat">
                <p class="titletext">扫码完成个人认证</p>
                <p class="margin-top1">使用微信或其他app扫描二维码进行刷脸认证</p>
                <div class="flexcenter">
                    <Scancertificat :url="scanurl" ref="scanmsg"></Scancertificat>
                </div>
            </div>
        </el-dialog>
    </div>
</template>

<script>
import { Message } from 'element-ui'
import Logintop from "./component/logintop.vue";
import Scancertificat from "../work/components/scanCertificat.vue"
import { findAccount } from '@/api/index'
export default {
    components: {
        Logintop,
        Scancertificat
    },
    data() {
        return {
            type: 1,
            checked:false,
            checked1:false,
            ruleForm: {
                name: '',
                code: '',
                mobile: '',
            },
            rules: {
                name: [
                    { required: true, message: '', trigger: 'blur' },
                ],
                code: [
                    { required: true, message: '', trigger: 'blur' },
                ],
                mobile: [
                    { required: true, message: '请输入手机号', trigger: 'blur' },
                ],
            },
            dialogVisible: false,//对话框
            dialogtitle: "大鸿签服务协议",//对话框框标题
            content: "<h1>找回账号</h1>",
             scanshow: false,
            scanurl: "",//二维码路径
        }
    },
    created(){
        let {idNumber,realName}=this.$route.params.ruleForm || {}
        if(idNumber==undefined&&realName==undefined){
            this.$router.push({name:"retrieveAccount"},()=>{})
            return
        }
        this.ruleForm.name=realName
        this.ruleForm.code=idNumber
    },
    methods: {
        showdialog(value) {
            this.dialogVisible = true
            if (value == 1) {
                this.dialogtitle = "大鸿签服务协议"
            } else {
                this.dialogtitle = "大鸿签隐私政策"
            }
        },
        dialogVisibleFn(){
            this.dialogVisible = false
            this.checked=true
        },
        handleClose(done) {
            done();
        },
        changetype(value) {
            this.type = value
        },
        // 同意并继续
        agreeContinue(formName) {
            let type=this.type
            if(type==1){
                let {name, code,mobile} = this.ruleForm
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        // alert('submit!');
                        if(!this.checked){
                            Message({
                                message: '请勾选并同意《大鸿签服务协议》《隐私政策》',
                                type: 'warning',
                                duration: 2000
                            })
                            return false
                        }

                        findAccount({
                            findType: 1,// 1-手机号找回 2-银行卡 3-人脸识别
                            idNumber: code,
                            phone: mobile,
                            realName: name
                        }).then(res => {
                            console.log(res);
                            Message({
                                message: '认证成功，请立即登陆',
                                type: 'success',
                                duration: 2000,
                                onClose:()=>{
                                    this.$router.push({name:"login"},()=>{})
                                }
                            })
                        })
                    } else {
                        console.log('error submit!!');
                        return false;
                    }
                });
            }else if(type===2){
                if(!this.checked){
                    Message({
                        message: '请勾选并同意《大鸿签服务协议》《隐私政策》',
                        type: 'warning',
                        duration: 2000
                    })
                    return false
                }
                if(!this.checked1){
                    Message({
                        message: '请勾选并同意大鸿签采集人脸识别数据',
                        type: 'warning',
                        duration: 2000
                    })
                    return false
                }
                this.scanurl = "http://m.jqjq.net/jiqiao/75871.html"
                this.scanshow = true
            }
        },
        refreshscan() {
            this.$refs.scanmsg.bindQRCode()
        }
    }

}
</script>
<style lang="scss">

.pagepadding .el-input-group__append {
    background: none;
}

.pagepadding .el-input__inner {
    height: 55px;
}

.el-input.is-disabled .el-input__inner {
    background: none;

}
</style>
<style lang="scss" scoped>
.scancertificat {
    text-align: center;
    padding: 50px 0 50px;
}
.noitembox {
    padding: 15px 30px;
    border: 1px solid #e5e6eb;
    width: 45%;
    border-radius: 5px;
}

.itembox {
    padding: 15px 30px;
    border: 1px solid #0975E0;
    width: 45%;
    border-radius: 5px;


}

.itemtext {
    font-size: 18px;
    font-weight: 500;
    color: #666;
}

.contentpadding {
    padding: 0 40px 100px;
}

.pagepadding {
    padding: 100px 200px 0;
}


.bottomline {
    border-bottom: 1px solid rgba(0, 0, 0, .1);
}

.xyzc {
    margin-top: 300px;
}
</style>